<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="请求数据">
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
</table>
<!-- 引入jq框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("input").click(function () {
        let  arr=[{name:"华为手机",price:2000,count:55},
            {name:"小米电视",price: 3000,count: 22},
            {name: "联想笔记本",price: 5000,count: 89}];
        //遍历数组把数组显示到table里面
        for (let item of arr) {
            let  tr=$("<tr></tr>")
            let  nametd=$("<td></td>")
            let  pricetd=$("<td></td>")
            let  counttd=$("<td></td>")
            nametd.text(item.name)
            pricetd.text(item.price)
            counttd.text(item.count);
            tr.append(nametd);
            tr.append(pricetd);
            tr.append(counttd);
            $("table").append(tr);
        }
    })
</script>
</body>
</html>